<template>
  <div class="container">
    <!-- <RosConnect></RosConnect> -->
     leaflet
    <div id="map"></div>
  </div>
</template>
<script>
/* global ROS2D */
import ROSLIB from "roslib";
// import ROS2D from "ros2d";
import RosConnect from "../../components/RosConnect.vue";
export default {
  data() {
    return {
      ros: null,
    };
  },
  components: {
    RosConnect,
  },
  mounted(){
    this.init();
  },
  methods: {
    init() {
      // Connect to ROS.
      this.ros = new ROSLIB.Ros({
        url: "ws://192.168.176.142:9090",
      });

      // 监听连接
      this.ros.on("connection", () => {
        console.log("成功连接到ROS");
      });
      // 监听错误
      this.ros.on("error", (error) => {
        console.log("ROS连接错误: ", error);
      });
      // 监听关闭
      this.ros.on("close", () => {
        console.log("ROS连接关闭");
        this.rosStatus = false;
      });

      // Create the main viewer.
      var viewer = new ROS2D.Viewer({
        divID: "map",
        width: 640,
        height: 480,
      });

      // Setup the map client.
      var gridClient = new ROS2D.OccupancyGridClient({
        ros: this.ros,
        rootObject: viewer.scene,
      });
      // Scale the canvas to fit to the map
      gridClient.on("change", function () {
        viewer.scaleToDimensions(
          gridClient.currentGrid.width,
          gridClient.currentGrid.height
        );
        viewer.shift(
          gridClient.currentGrid.pose.position.x,
          gridClient.currentGrid.pose.position.y
        );
      });
    },
  },
};
</script>
<style></style>
